
   
  //  用于在组件挂载时创建和挂载副作用 Hook。
//    function mountEffectImpl(
//     fiberFlags: Flags, //标识当前组件的状态
//     hookFlags: HookFlags, //标识当前 Hook 的类型
//     create: () => (() => void) | void, //返回副作用函数的函数。副作用函数会在组件挂载和更新时执行
//     deps: Array<mixed> | void | null, //依赖数组，用于控制副作用函数的触发时机
//   ): void {
//     const hook = mountWorkInProgressHook();
//     const nextDeps = deps === undefined ? null : deps;
//     currentlyRenderingFiber.flags |= fiberFlags;
//     hook.memoizedState = pushEffect(
//     HookHasEffect | hookFlags,
//     create,
//     createEffectInstance(),
//     nextDeps,
//   );
// }

   
//    function mountInsertionEffect(
//      create: () => (() => void) | void,
//      deps: Array<mixed> | void | null,
//    ): void {
//      mountEffectImpl(UpdateEffect, HookInsertion, create, deps);
//    }
    
//     useInsertionEffect(
//       create: () => (() => void) | void, //返回副作用函数的函数
//       deps: Array<mixed> | void | null, //控制副作用函数的出发（依赖数组）
//     ): void {
//       currentHookNameInDev = 'useInsertionEffect';
//       mountHookTypesDev();
//       checkDepsAreArrayDev(deps); //确认传入的依赖数组 deps 是一个数组类型
//       return mountInsertionEffect(create, deps);
//     }



  // 怎么使用的
  // const elementRef = useRef(null);

  // useEffect(() => {
  //   const element = elementRef.current;
  //   const handleClick = () => {
  //     console.log("Element clicked!");
  //   };
  //   element.addEventListener("click", handleClick);
  //   // 在组件卸载时执行清理操作
  //   return () => {
  //     element.removeEventListener("click", handleClick);
  //   };
  // }, []);
    //  <div>
    //     <div style={{ color: "red" }}>useInsertionEffect</div>
    //     <div ref={elementRef}>Click me</div>
    //   </div>


// 精简版代码
// 我们使用 useEffect 创建了一个副作用钩子。
// 在钩子中，我们检查当前组件是否已经插入到 DOM 树中，
// 如果是，则执行传入的副作用函数。
// 这样可以确保副作用函数只在元素插入到 DOM 树时执行一次。
// import { useEffect, useRef } from 'react';

// function useInsertionEffect(create, deps) {
  // 判断组件是否已挂载
//   const mountedRef = useRef(false);

//   useEffect(() => {
//     const effectCleanup = create();

//     if (!mountedRef.current) {
//       mountedRef.current = true;
//     }

//     return () => {
//       if (effectCleanup) {
//         effectCleanup();
//       }
//     };
//   }, deps);
// }

// export default useInsertionEffect;
